<template>
  <LoginRegisterPopup ref="loginRegisterPopup" />
  <div class="header">
    <div class="header-left">
      <img
        class="logo"
        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa147c47b5cce80dfd68096dd99fc89463ec5c1c38c788f4ee2ff3f653607596?noCache=true"
        alt="logo"
      />
      <ul class="menu-content">
        <li
          v-for="item in menuItems"
          :key="item.key"
          @click="handleSelect(item.key, item.path)"
          @mouseenter="handleMouseEnter(item.key)"
          @mouseleave="handleMouseLeave()"
          :class="{ active: activeIndex === item.key }"
          class="menu-item"
        >
          {{ $t(`menu.${item.name}`) }}
          <span class="underline"></span>
          <ul
            v-if="item.config"
            class="dropdown"
            v-show="hoverIndex === item.key"
            :class="{ 'dropdown-visible': hoverIndex === item.key }"
          >
            <div class="dropdown-body">
              <img class="bg" :src="item.config.background" alt="" />
              <div class="tops">
                <img class="dropdown-logo" :src="item.config.logo" alt="" />
                <div class="dropdown-content-right">
                  <div class="dropdown-content-right-title">
                    {{ $t(`config.title.${item.config.title}`) }}
                    <img
                      class="icon-right"
                      src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3c59e3b74e417ecf4a77f2b8d582db1ca8c837ee4f452dd93ab922ad8e32659?noCache=true"
                      alt=""
                    />
                  </div>
                  <div class="dropdown-content-right-note">
                    {{ $t(`config.note.${item.config.note}`) }}
                  </div>
                </div>
              </div>
            </div>
            <div class="under-line"></div>
            <div class="tool-list">
              <div
                class="list-item"
                v-for="is in item.config.toolList"
                :key="is"
                @click="goPath(is.path)"
              >
                <img
                  class="list-item-icon"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7919bfc7033c5aae38aec8d2b5e7108c8877bf41f4bd17c237f98f470fa0298e?noCache=true"
                  alt=""
                />
                {{ $t(`toolList.${is.title}`) }}
              </div>
            </div>
          </ul>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-select
        v-model="language"
        placeholder="选择语言"
        @change="handleLanguageChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="$t(`languages.${item.label}`)"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="openLoginRegisterModal">{{
        $t("buttons.loginRegister")
      }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue"
import { useRouter } from "vue-router"
import { useI18n } from "vue-i18n"
import LoginRegisterPopup from "./LoginRegisterPopup.vue"

const { locale, t } = useI18n({
  useScope: "global",
})

const router = useRouter()

// 语言相关数据
const currentLanguage = ref(locale.value === "zh" ? "中文" : "英文")
const languageOptions = [
  { value: "中文", label: "中文" },
  { value: "英文", label: "英文" },
]

// 处理语言切换
const handleLanguageChange = (value: string) => {
  const newLocale = value === "中文" ? "zh" : "en"
  locale.value = newLocale
  localStorage.setItem("locale", newLocale)
}

// 监听locale变化，同步更新currentLanguage
watch(locale, (newVal) => {
  currentLanguage.value = newVal === "zh" ? "中文" : "英文"
})

const currentLocale = computed(() => locale.value)
console.log("currentLocale", currentLocale)

const switchLocale = () => {
  const newLocale = locale.value === "zh" ? "en" : "zh"
  locale.value = newLocale
  localStorage.setItem("locale", newLocale)
  // 更新 language 的值
  language.value = newLocale === "zh" ? "中文" : "英文"
}

// 存储当前选中的菜单项索引
const activeIndex = ref("0")
// 存储鼠标移入的菜单项索引
const hoverIndex = ref("")
// 处理鼠标移入事件
const handleMouseEnter = (key: string) => {
  hoverIndex.value = key
}
// 处理鼠标移出事件
const handleMouseLeave = () => {
  hoverIndex.value = ""
}
// 菜单项数据
const menuItems = ref([
  { name: "首页", key: "0", path: "/" },
  {
    name: "公会",
    key: "1",
    config: {
      background:
        "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng69302a770ce1c61892b34f583e6e8ec9aec9421c95267e97e0445765880a26d8?noCache=true",
      logo: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3a5024477b230dae1518d3c1917b75acb96952186495bdca0539c745df3d188e?noCache=true",
      title: "Tik Tok直播公会",
      note: "开启你的TikTok公会之旅，提供主播服务，提供主播培训，加入公会，给您最好的扶持与服务",
      toolList: [
        {
          icon: "",
          title: "开设公会",
          path: "/guild",
        },
        {
          icon: "",
          title: "搜索网红",
          path: "/guild",
        },
        {
          icon: "",
          title: "主播维护",
          path: "/guild",
        },
        {
          icon: "",
          title: "营销活动",
          path: "/guild",
        },
        {
          icon: "",
          title: "培训扶持",
          path: "/guild",
        },
        {
          icon: "",
          title: "广告增长",
          path: "/guild",
        },
        {
          icon: "",
          title: "学习中心",
          path: "/guild",
        },
        {
          icon: "",
          title: "更多商业机会",
          path: "/guild",
        },
      ],
    },
  },
  {
    name: "商家",
    key: "2",
    config: {
      background:
        "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf5fc55d4d5be0fb0bcf4b0f4c37322d2791e33c13dcb25db9897f633bdddf8e0?noCache=true",
      logo: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngee147e6f53a0339b1dae47fca41f6555dabf6ebbd9107a9db05a2d061f5e0533?noCache=true",
      title: "为商家服务",
      note: "提供全球网红和精准合作，帮助商家增长销量和提升品牌效应",
      toolList: [
        {
          icon: "",
          title: "全部网红",
          path: "/guild",
        },
        {
          icon: "",
          title: "精准搜索网红",
          path: "/guild",
        },
        {
          icon: "",
          title: "发布任务",
          path: "/guild",
        },
        {
          icon: "",
          title: "营销活动",
          path: "/guild",
        },
        {
          icon: "",
          title: "数据分析",
          path: "/guild",
        },
        {
          icon: "",
          title: "广告增长",
          path: "/guild",
        },
        {
          icon: "",
          title: "学习中心",
          path: "/guild",
        },
        {
          icon: "",
          title: "更多商业机会",
          path: "/guild",
        },
      ],
    },
  },
  {
    name: "网红",
    key: "3",
    config: {
      background:
        "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng2c0495a1061ce69023dd068f10eb1363e5a5b89cc38db36e0d2f81e0df4acd24?noCache=true",
      logo: "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng005cb6b96da0d40e039f80a608f8e1319bfb41a89f46ac2945c4681eb5ab6325?noCache=true",
      title: "为网红服务",
      note: "全平台一站式数据管理,享受高佣金，快速提现，全球优质品牌长期合作",
      toolList: [
        {
          icon: "",
          title: "全平台一站式管理",
          path: "/guild",
        },
        {
          icon: "",
          title: "合作邀请",
          path: "/guild",
        },
        {
          icon: "",
          title: "营销活动",
          path: "/guild",
        },
        {
          icon: "",
          title: "数据分析",
          path: "/guild",
        },
        {
          icon: "",
          title: "广告增长",
          path: "/guild",
        },
        {
          icon: "",
          title: "学习中心",
          path: "/guild",
        },
        {
          icon: "",
          title: "更多商业机会",
          path: "/guild",
        },
      ],
    },
  },
  { name: "价格", key: "4", path: "/price" },
  { name: "案例", key: "5", path: "/case" },
])

// 处理菜单项点击事件
const handleSelect = (key: string, path) => {
  activeIndex.value = key
  path && goPath(path)
}

const language = ref(locale.value === "zh" ? "中文" : "英文")
const options = [
  {
    value: "中文",
    label: "中文",
  },
  {
    value: "英文",
    label: "英文",
  },
]

const goPath = (p) => {
  router.push(p)
}

const loginRegisterPopup = ref(null)

const openLoginRegisterModal = () => {
  loginRegisterPopup.value.open()
}
</script>

<style scoped>
.header {
  padding: 0 43px 0 136px;
  width: 100%;
  background-color: #ffffff;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 11;
}

.header-left {
  display: flex;
  align-items: center;
}

.menu-content {
  margin-left: 42px;
  padding: 0;
  display: flex;
  gap: 42px;
}

.menu-item {
  list-style: none;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: PingFangSC, "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #17181b;
  transition: color 0.3s;

  &:hover {
    color: #a43aff;
  }
}

.active {
  color: #a43aff !important;
  font-weight: 500;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #a43aff;
  transition: width 0.3s ease;

  .active & {
    width: 100%;
  }
}

.logo {
  width: 86px;
  height: 38px;
}

.header-right {
  display: flex;
}

:deep(.el-select__wrapper) {
  width: 76px;
  height: 32px !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: none !important;
  margin-right: 8px;
}

:deep(.el-input__inner) {
  height: 30px !important;
  line-height: 30px !important;
  font-size: 14px !important;
}

:deep(.custom-select .el-select__caret) {
  line-height: 30px !important;
}

:deep(.el-select-dropdown__item) {
  padding: 6px 12px !important;
  font-size: 14px !important;
  height: 28px !important;
  line-height: 28px !important;
}
.el-button {
  width: 95px;
  height: 32px;
  background: linear-gradient(135deg, #a43aff 0%, #ff3f81 100%);
  border-radius: 6px;
  margin-right: 93px;
  border: none;
}
.dropdown {
  position: fixed;
  width: 100%;
  top: 20px;
  left: 0;
  background: #fff;
  z-index: -1;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* 添加过渡动画 */
}
.dropdown-body {
  position: relative;
  margin-top: 56px;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  object-fit: cover;
}
.tops {
  display: flex;
}
.dropdown-body {
  padding-left: 136px;
  padding-top: 33px;
  padding-bottom: 31px;
}
.dropdown-logo {
  width: 46px;
  height: 46px;
}
.dropdown-content-right {
  margin-left: 12px;
}
.dropdown-content-right-title {
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  text-align: left;
  font-style: normal;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
}
.dropdown-content-right-note {
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 20px;
  text-align: left;
  font-style: normal;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
}
.icon-right {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.under-line {
  width: 100%;
  height: 1px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.tool-list {
  padding-top: 30px;
  padding-left: 164px;
  padding-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  max-width: 1300px;
}
.list-item {
  max-width: calc(133px + 80px);
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-right: 72px;
  margin-bottom: 24px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
}
.list-item:hover {
  cursor: pointer;
  color: black;
}
.list-item-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
}
</style>
